import React from 'react'
import Head from '../component/Head'
import { MyIcon } from '../MyIcon/MyIcon'
import styles from '../css2/Secure.module.scss'
import {useNavigate} from 'react-router-dom'
export default function Secure() {
    const navigate=useNavigate()
    return (
        <div style={{ height: '100vh', backgroundColor: '#F2F2F2' }}>
            <Head titleName='账号绑定与安全'></Head>
            <div className={styles.secure_box}>
                <div onClick={()=>{navigate('/app/setting/up_phone')}} className={styles.secure_ele}>
                    <div className={styles.ele_left}>
                        <div style={{ backgroundColor: '#FF9B9A' }} className={styles.icon_box}><MyIcon type='icon-shouji'></MyIcon></div>
                        <div>手机号</div>
                    </div>
                    <div className={styles.ele_right}>
                        <div style={{ marginRight: '20px' }}>188****8766</div>
                        <MyIcon type='icon-xiangyoujiantou'></MyIcon>
                    </div>
                </div>
                <div onClick={()=>{navigate('/app/setting/up_password')}} className={styles.secure_ele}>
                    <div className={styles.ele_left}>
                        <div style={{ backgroundColor: '#3E7CFC' }} className={styles.icon_box}><MyIcon type='icon-bangdingyouxiang'></MyIcon></div>
                        <div>修改密码</div>
                    </div>
                    <div className={styles.ele_right}>
                        <MyIcon type='icon-xiangyoujiantou'></MyIcon>
                    </div>
                </div>
            </div>
            <div className={styles.secure_box}>
                <h2 style={{ height: '60px', backgroundColor: 'white', lineHeight: '60px', paddingLeft: '20px' }}>社交账号</h2>
                <div className={styles.secure_ele}>
                    <div className={styles.ele_left}>
                        <div style={{ backgroundColor: '#2DCB69' }} className={styles.icon_box}><MyIcon type='icon-weixin11'></MyIcon></div>
                        <div>Wechat</div>
                    </div>
                    <div className={styles.ele_right}>
                        <div style={{ marginRight: '20px' }}>已绑定</div>
                        <MyIcon type='icon-xiangyoujiantou'></MyIcon>
                    </div>
                </div>
                <div className={styles.secure_ele}>
                    <div className={styles.ele_left}>
                        <div style={{ backgroundColor: '#D7D7D7' }} className={styles.icon_box}><MyIcon type='icon-dongzuomianban-fenxiang-weiboweibo'></MyIcon></div>
                        <div>微博</div>
                    </div>
                    <div className={styles.ele_right}>
                        <div style={{ marginRight: '20px' ,color:'#CCCCCC'}}>未绑定</div>
                        <MyIcon type='icon-xiangyoujiantou'></MyIcon>
                    </div>
                </div>
                <div className={styles.secure_ele}>
                    <div className={styles.ele_left}>
                        <div style={{ backgroundColor: '#D7D7D7' }} className={styles.icon_box}><MyIcon type='icon-QQ'></MyIcon></div>
                        <div>QQ</div>
                    </div>
                    <div className={styles.ele_right}>
                        <div style={{ marginRight: '20px' ,color:'#cccccc'}}>未绑定</div>
                        <MyIcon type='icon-xiangyoujiantou'></MyIcon>
                    </div>
                </div>
            </div>
        </div>
    )
}
